<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="Simulation view of the app on different platforms."><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - Previews</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-C30E4C88-B014-4446-A5E0-30B38088C7D0]--><body><div id="content"><div class="header"><h1>Previews</h1><div id="breadcrumb"></div></div>
<p id="GUID-353F9F6D-DFE4-4B7E-9A2A-A7AE29FACC36">
The <span class="uicontrol">Previews</span> button allows you to interactively preview the  app in a  simulated device browser. You can interact  with the application as if it was a live app on various simulated platforms.</p>
<div class="notes" id="GUID-AABBB3A5-834C-429E-BA3A-32AA497B5A02"><div class="note"><img class="note_img" src="rsrc/note.png" alt="Note" title="Note"><span>Note:</span></div><div class="tipbody"><p id="GUID-7EAC09E9-9D4A-4215-BFE6-8304E8809206">The Previews button is not available when you build 3D apps.</p></div></div><p id="GUID-58F09094-3523-4C15-9A56-947296F20741">For each preview, adjust the <span class="uicontrol">Width</span> and <span class="uicontrol">Height</span> value in the left pane, and interactively view the changes in the right pane. In addition, rotate the view by clicking the portrait or landscape button in the upper-right corner of the preview window. Once completed, click <span class="uicontrol">Configure</span> to return to the configuration page.</p>
<p ishcondition="agol_plat=wab_dev" id="GUID-A212219A-4884-46AA-AC8B-590F6D7DEB55">There are two styles of layout in a theme. One is for desktop and one is for mobile devices. When either the height or width of a screen display is less than 600 pixels, the mobile layout applies. You can also overwrite the default value with <a class="xref" rel="03w3/03w300000079000000.htm" href="03w3/03w300000079000000.htm">mobileBreakPoint</a>url parameter.</p><img purpose="img" placement="inline" alt="Previews" title="Previews" src="03w3/GUID-D95648BA-545F-4DB9-8766-A901E25232B1-web.png"> <ul purpose="ul" id="UL_6C779C45578D47CDA5058CFEED2FEB56"> <li purpose="li" id="LI_6F66B42B478440F9A0F8494194291590"> </li> </ul> <div class="notes" id="GUID-F77BEFA4-48CE-469C-9FF1-24145D421CD3"><div class="caution"><img class="note_img" src="rsrc/caution.png" alt="Caution" title="Caution"><span>Caution:</span></div><div class="tipbody"><p id="GUID-AAAA8BB6-BD85-4F7F-965A-4143159AC95A"> The previews window does not illustrate the varied versions of compiled code that can be exported through the application. It simply helps preview how the  application looks and works on different devices.</p></div></div><p id="GUID-6A31EBCC-B007-4482-9FDA-8FB09773ECA2">Further, you can scan QR code to view the app on your mobile device.</p><div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-E3DBBE91-72B4-416B-B299-D87E3ED4536C-web.png" purpose="img" alt="QR code" title="QR code"></td></tr></table></div><div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>